import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import Textarea from '../../ch/components/Textarea.vue'

<Meta
  title="Components/Form/Textarea"
  component={Textarea}
  argTypes={{
    variant: {
      control: {
        type: 'select',
        options: ['outline', 'negative'],
      },
    },
    required:   { control: { type: 'boolean' } },
    size: { control: { type: 'select', options: ['sm', 'base', 'lg'] } },
    message: {},
    messageType: {
      control: {
        type: 'select',
        options: ['error', 'warning', 'success', 'info'],
      },
    }
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Textarea },
  template: `
    <Textarea
      :variant="variant"
      :size="size"
      :label="label"
      :id="id"
      :name="name"
      :rows="rows"
      :cols="cols"
      :placeholder="placeholder"
      :message="message"
      :messageType="messageType"
      :required="required"
      :resizable="resizable"
      :maxlength="maxlength"
      :minlength="minlength"
    />
  `,
})

# Textarea

## Example

<Canvas>
  <Story
    name="Example"
    args={{
      variant: 'outline',
      size: 'base',
      label: 'Label',
      name: 'textarea-name',
      id:'textarea-id',
      placeholder: 'Placeholder'
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Example" />

## Textarea negative type

- `input--negative` for standard textareas on dark background

<Canvas style={{ backgroundColor: '#2f4356' }}>
  <textarea class="input--negative input--base" />
</Canvas>

## Textarea disabled state

- `input--disabled` or `disabled state on the input` to add the disabled style

<Canvas>
  <textarea class="input--outline input--base" disabled>Disabled</textarea>
  <textarea class="input--negative input--base" disabled>Disabled and negative</textarea>
</Canvas>

## Sizes

For size variations, the following css classes are built:

- `input--sm` for small inputs
- `input--base` for standard size
- `input--lg` for large inputs

<Canvas>
  <textarea class="input--outline input--sm" >Small</textarea>
  <textarea class="input--outline input--base" >Default</textarea>
  <textarea class="input--outline input--lg" >Large</textarea>
</Canvas>

## Required textarea

If the textarea is mandatory:
- a `required` attribute is added to the input element
- an asterisk is displayed right after the label. This can be done by adding a `text--asterisk` class on the label element:

<Canvas>
<div class="form__group__input">
  <label for="my-id" class="text--base text--asterisk">
    Your message
  </label>
   <textarea
    class="input--outline input--base"
    required
  ></textarea>
</div>
</Canvas>

## Messages

If the textarea has error, an `input--error` class is added to the input element. Additionally
a `badge badge--sm badge--error` element wraps the error message, right after the input element:

<Canvas>
<div class="form__group__input">
  <label for="my-id" class="text--base text--asterisk">
    Your message
  </label>
  <textarea
    class="input--outline input--base input--error"
    required
  ></textarea>
  <div class="badge badge--sm badge--error">
    This field is required
  </div>
</div>
</Canvas>
